@charset "utf-8";

@keyframes pre_flow {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes pre_flow_img {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

#prologue {
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    z-index: 95000;
    background-color: #fff;
    background-image: url("../img/prologue.jpg");
    background-position: top right;
    background-size: cover;
    font-family: 'yu-mincho-pr6', YuMincho, 'Yu Mincho', sans-serif;
}

#prologue div {
    /* width: 100%; */
    position: absolute;
    opacity: 1;
    transition: 1s;
    /* cursor: pointer; */
    overflow: hidden;
}

.pre_hidden {
    opacity: 0 !important;
    pointer-events: none;
}

.pre_hidden2 {
    opacity: 0 !important;
    pointer-events: none;
}

.pre1_box,
.pre2_box,
.pre3_box,
.pre4_box {
    width: 100%;
    height: 100vh;
    position: relative;
}

.pre1,
.pre2,
.pre3 {
    overflow: hidden;
}

.pre1_1 {
    position: static !important;
    max-width: 1030px;
    width: 82.4%;
    /* top: 39%; */
    /* left: 10%; */
    z-index: 10;
    overflow: hidden;
    margin-bottom: 20px;
}

.pre1_1_sp {
    position: static !important;
    max-width: 715px;
    width: 100%;
    z-index: 10;
    overflow: hidden;
    top: 0;
    left: 0;
    margin-bottom: 10px;
}

.pre1_1_2_sp {
    position: static !important;
    max-width: 315px;
    width: 44%;
    z-index: 10;
    overflow: hidden;
    bottom: 0;
    left: 0;
    margin-bottom: 50px;
}

.pre1_2_sp {
    position: static !important;
    max-width: 640px;
    width: 89.5%;
    z-index: 10;
    overflow: hidden;
    top: 0;
    left: 0;
    margin-bottom: 10px;
}

.pre1_2_2_sp {
    position: static !important;
    max-width: 610px;
    width: 85.3%;
    z-index: 10;
    overflow: hidden;
    bottom: 0;
    left: 0;
}

.pre1_2 {
    position: static !important;
    max-width: 1250px;
    width: 100%;
    top: 51%;
    /* left: 10%; */
    z-index: 10;
    overflow: hidden;
}

.pre1_box {
    display: flex;
    justify-content: center;
}

.pre1_box_2 {
    position: relative;
    max-width: 1250px;
    width: 90%;
    height: auto;
    /* transform-origin: center; */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.pre1_box_2_sp {
    position: relative;
    width: 98%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pre1_box_3_sp {
    position: relative;
    width: 100%;
    height: 100px;
    bottom: 20%;
}

.pre2_box_2 {
    position: relative;
    width: 80%;
    height: 100vh;
    left: 50%;
    transform: translateX(-50%);
}

.pre2_box_3_sp {
    position: relative;
    width: 98%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pre2_box_4_sp {
    position: relative;
    width: 100%;
    height: auto;
    top: 52%;
}

.pre3_box_2 {
    position: relative;
    width: 100%;
    height: 100vh;
    /* left: 50%;
  transform: translateX(-50%); */

}

@media screen and (max-width:1100px) {
    .pre2_box_2 {
        width: 90%;
    }
}

.pre2_box_3 {
    max-width: 1000px;
    width: 90%;
    height: auto;
    /* position: absolute; */
    position: relative;
    left: 50%;
    /* top: 41%; */
    top: 50%;
    transform: translate(-50%, -50%);
}

.pre3_box_3 {
    max-width: 1115px;
    width: 90%;
    height: auto;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.pre3_box_3 .flex_area {
    position: static !important;
    max-width: 930px;
    width: 83.5%;
    height: auto;
    margin: 40px 0 auto auto;
}

.pre3_box_3_sp {
    position: relative;
    max-width: 715px;
    width: 100%;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 35px;
}

/* @media screen and (max-width:1430px) {
  .pre3_box_2 {
     width: 90%;
  }
  .pre3_box_3 {
    width: 65%;
  }
} */
.pre2_box_3 .flex_area {
    position: static !important;
    width: 100%;
    height: auto;
}

.pre2_box_3 .flex_area .pre2_1 {
    position: static !important;
    max-width: 200px;
    width: 19.25%;
    /* top: 41%; */
    /* left: 10%; */
    z-index: 9;
}

.pre2_box_3_sp .flex_area {
    position: static !important;
    width: 100%;
    height: auto;
    margin-bottom: 50px;
}

.pre2_box_3_sp .flex_area .pre2_1_sp {
    position: static !important;
    max-width: 200px;
    width: 27.95%;
    z-index: 9;
}

.pre2_box_3 .flex_area .pre2_2 {
    position: static !important;
    max-width: 360px;
    width: 35%;
    /* top: 41%; */
    /* left: 19.25%; */
    z-index: 9;
}

.pre2_box_3_sp .pre2_2_sp {
    position: static !important;
    max-width: 360px;
    width: 50.3%;
    z-index: 9;
}

.pre2_3 {
    position: static !important;
    max-width: 760px;
    width: 71.5%;
    top: 62.4%;
    left: 30%;
    z-index: 9;
    margin: 20px 0 auto auto;
}

.pre2_box_3_sp .pre2_3_sp {
    position: static !important;
    max-width: 345px;
    width: 48.2%;
    /* top: 0;
  left: 0; */
    z-index: 9;
}

.pre2_box_3_sp .pre2_3_2_sp {
    position: static !important;
    max-width: 415px;
    width: 58%;
    margin: 20px 0 auto auto;
    z-index: 9;
}

.pre3_1 {
    position: static !important;
    max-width: 370px;
    width: 33.2%;
    top: 37.99%;
    /* left: 18%; */
    z-index: 8;
}

.pre3_1_sp {
    position: static !important;
    max-width: 370px;
    width: 51.9%;
    top: 41%;
    /* left: 18%; */
    z-index: 8;
    margin-bottom: 15px;
}

.pre3_2 {
    position: static !important;
    max-width: 215px;
    width: 23.1%;
    /* top: 52%;
  left: 40%;
  transform: translateX(-100%); */
    z-index: 8;
}

.pre3_box_3_sp .pre3_2_sp {
    position: static !important;
    max-width: 215px;
    width: 30%;
    z-index: 9;
    margin-bottom: 10px;
}

.pre3_3 {
    position: static !important;
    max-width: 715px;
    width: 76.9%;
    /* top: 52%;
  left: 40%; */
    z-index: 8;
}

.pre3_box_3_sp .pre3_3_sp {
    position: static !important;
    max-width: 715px;
    width: 100%;
    z-index: 9;
}

.pre4_box {
    z-index: 15;
}

.pre_pc .pre4 {
    position: absolute;
    max-width: 30%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pre_sp .pre4 {
    position: absolute;
    max-width: 60%;
    width: 60%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* @keyframes pre_flow1-1-1 {
  0% {
      transform: translateX(-100%);
  }
  9.1% {
    transform: translateX(-90%);
  }
  15.2% {
    transform: translateX(-90%);
  }
  66.7% {
    transform: translateX(-31%);
  }
  72.8% {
    transform: translateX(-31%);
  }
  100% {
      transform: translateX(0);
  }
} */
@keyframes pre_flow1-1-1 {
    0% {
        transform: translate(-50%);
        opacity: 0;
        filter: blur(5px);
    }

    10% {
        transform: translate(-20%);
    }

    20% {
        transform: translate(0%);

    }

    50% {
        filter: blur(0px);
    }

    100% {
        opacity: 1;

    }
}

@keyframes pre_flow1-1-2 {
    0% {
        transform: translate(50%);
    }

    10% {
        transform: translate(20%);
    }

    20% {
        transform: translate(0%);
    }

    100% {}
}

.pre_pc .pre1-1 {
    animation-name: pre_flow1-1-1;
    animation-duration: 2s;
    animation-timing-function: linear;
}

.pre_pc .pre1-1 img {
    animation-name: pre_flow1-1-2;
    animation-duration: 2s;
    animation-timing-function: linear;
}

/* @keyframes pre_flow1-1-2 {
  0% {
      transform: translateX(100%);
  }
  9.1% {
    transform: translateX(90%);
  }
  15.2% {
    transform: translateX(90%);
  }
  66.7% {
    transform: translateX(31%);
  }
  72.8% {
    transform: translateX(31%);
  }
  100% {
      transform: translateX(0);
  }
} */
/* @keyframes pre_flow1-1-1_sp {
  0% {
      transform: translateX(-100%);
  }
  13.6% {
    transform: translateX(-85%);
  }
  22.7% {
    transform: translateX(-85%);
  }
  100% {
      transform: translateX(0);
  }
} */
/* @keyframes pre_flow1-1-1_sp {
  0% {
    transform: translate(-50%);
    opacity: 0;
    filter: blur(5px);
  }
  10% {
    transform: translateX(-85%);
  }
  20% {
    transform: translateX(-85%);
  }
  50% {

  }
  100% {
      transform: translateX(0);
  }
} */
.pre_sp .pre1-1 {
    animation-name: pre_flow1-1-1;
    animation-duration: 1.4s;
    animation-timing-function: linear;
}

/* @keyframes pre_flow1-1-2_sp {
  0% {
      transform: translateX(100%);
  }
  13.6% {
    transform: translateX(85%);
  }
  22.7% {
    transform: translateX(85%);
  }
  100% {
      transform: translateX(0);
  }
} */
.pre_sp .pre1-1 img {
    animation-name: pre_flow1-1-2;
    animation-duration: 1.4s;
    animation-timing-function: linear;
}

.pre_sp .pre1-1-2 {
    animation-name: pre_flow1-1-1;
    /* animation-duration: 1.26s; */
    animation-duration: 1.2s;
    animation-timing-function: linear;
}

.pre_sp .pre1-1-2 img {
    animation-name: pre_flow1-1-2;
    /* animation-duration: 1.26s; */
    animation-duration: 1.2s;
    animation-timing-function: linear;
}

/* @keyframes pre_flow1-2-1 {
  0% {
      transform: translateX(-100%);
  }
  13.3% {
    transform: translateX(-83%);
  }
  17.7% {
    transform: translateX(-83%);
  }
  24.4% {
    transform: translateX(-74.5%);
  }
  28.8% {
    transform: translateX(-74.5%);
  }
  48.8% {
    transform: translateX(-48.5%);
  }
  53.2% {
    transform: translateX(-48.5%);
  }
  62.1% {
    transform: translateX(-37%);
  }
  66.5% {
    transform: translateX(-37%);
  }
  86.5% {
    transform: translateX(-11%);
  }
  90.9% {
    transform: translateX(-11%);
  }
  100% {
      transform: translateX(0);
  }
} */
@keyframes pre_flow1-2-1 {
    0% {
        opacity: 0;
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        filter: blur(0px);
    }
}

.pre_pc .pre1-2 {
    animation-name: pre_flow1-2-1;
    /* animation-duration: 6.3s; */
    /* animation-duration: 4.36s; */
    animation-duration: 1.2s;
    animation-timing-function: linear;
    filter: blur(0px);
}

@keyframes pre_flow1-2-2 {
    /* 0% {
      transform: translateX(100%);
  }
  13.3% {
    transform: translateX(83%);
  }
  17.7% {
    transform: translateX(83%);
  }
  24.4% {
    transform: translateX(74.5%);
  }
  28.8% {
    transform: translateX(74.5%);
  }
  48.8% {
    transform: translateX(48.5%);
  }
  53.2% {
    transform: translateX(48.5%);
  }
  62.1% {
    transform: translateX(37%);
  }
  66.5% {
    transform: translateX(37%);
  }
  86.5% {
    transform: translateX(11%);
  }
  90.9% {
    transform: translateX(11%);
  }
  100% {
      transform: translateX(0);
  } */
}

.pre_pc .pre1-2 img {
    animation-name: pre_flow1-2-2;
    /* animation-duration: 6.3s; */
    animation-duration: 4.36s;
    animation-timing-function: linear;
}

/* @keyframes pre_flow1-2-1_sp {
  0% {
      transform: translateX(-100%);
  }
  27.3% {
    transform: translateX(-66.7%);
  }
  36.4% {
    transform: translateX(-66.7%);
  }
  50.3% {
    transform: translateX(-50%);
  }
  59.5% {
    transform: translateX(-50%);
  }
  100% {
      transform: translateX(0);
  }
} */
.pre_sp .pre1-2 {
    animation-name: pre_flow1-2-1;
    /* animation-duration: 3.08s; */
    animation-duration: 1s;
    animation-timing-function: linear;
}

/* @keyframes pre_flow1-2-2_sp {
  0% {
      transform: translateX(100%);
  }
  27.3% {
    transform: translateX(66.7%);
  }
  36.4% {
    transform: translateX(66.7%);
  }
  50.3% {
    transform: translateX(50%);
  }
  59.5% {
    transform: translateX(50%);
  }
  100% {
      transform: translateX(0);
  }
} */
.pre_sp .pre1-2 img {
    animation-name: pre_flow1-2-2;
    /* animation-duration: 3.08s; */
    animation-duration: 1s;
    animation-timing-function: linear;
}

/* @keyframes pre_flow1-2-2-1_sp {
  0% {
      transform: translateX(-100%);
  }
  19% {
    transform: translateX(-76.5%);
  }
  28.6% {
    transform: translateX(-76.5%);
  }
  71.4% {
    transform: translateX(-23.5%);
  }
  81% {
    transform: translateX(-23.5%);
  }
  100% {
      transform: translateX(0);
  }
} */
.pre_sp .pre1-2-2 {
    animation-name: pre_flow1-2-1;
    /* animation-duration: 2.94s; */
    animation-duration: 1s;
    animation-timing-function: linear;
}

/* @keyframes pre_flow1-2-2-2_sp {
  0% {
      transform: translateX(100%);
  }
  19% {
    transform: translateX(76.5%);
  }
  28.6% {
    transform: translateX(76.5%);
  }
  71.4% {
    transform: translateX(23.5%);
  }
  81% {
    transform: translateX(23.5%);
  }
  100% {
      transform: translateX(0);
  }
} */
.pre_sp .pre1-2-2 img {
    animation-name: pre_flow1-2-2;
    /* animation-duration: 2.94s; */
    animation-duration: 1s;
    animation-timing-function: linear;
}

@keyframes pre_flow2-1-1 {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

.pre2-1 {
    animation-name: pre_flow2-1-1;
    /* animation-duration: 1s; */
    animation-duration: 1s;
    animation-timing-function: linear;
}

@keyframes pre_flow2-1-2 {
    0% {
        transform: translateX(50%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.pre2-1 img {
    animation-name: pre_flow2-1-2;
    /* animation-duration: 1s; */
    animation-duration: 1s;
    animation-timing-function: linear;
}

.pre2-2 {
    animation-name: pre_flow;
    /* animation-duration: 1.5s; */
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
}

@keyframes pre_flow2-2-2 {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.pre2-2 img {
    animation-name: pre_flow2-2-2;
    /* animation-duration: 1.5s; */
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
}

.pre2-3 {
    animation-name: pre_flow;
    /* animation-duration: 4s; */
    animation-duration: 3s;
    animation-timing-function: ease-out;
}

@keyframes pre_flow2-3-2 {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.pre2-3 img {
    animation-name: pre_flow2-3-2;
    /* animation-duration: 4s; */
    animation-duration: 3s;
    animation-timing-function: ease-out;
}

.pre_sp .pre2-3 {
    animation-name: pre_flow;
    animation-duration: 1.75s;
    animation-timing-function: linear;
}

.pre_sp .pre2-3 img {
    animation-name: pre_flow2-3-2;
    animation-duration: 1.75s;
    animation-timing-function: linear;
}

.pre_sp .pre2-3-2 {
    animation-name: pre_flow;
    animation-duration: 2.25s;
    animation-timing-function: ease-out;
}

@keyframes pre_flow2-3-2 {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* .pre2-3 img {
    animation-name: pre_flow2-3-2;
    animation-duration: 4s;
    animation-timing-function: ease-out;
} */
.pre_sp .pre2-3-2 img {
    animation-name: pre_flow2-3-2;
    animation-duration: 2.25s;
    animation-timing-function: ease-out;
}

@keyframes pre_flow3-1-1 {
    0% {
        transform: translateX(-10%);
    }

    100% {
        transform: translateX(0);
    }
}

.pre3-1 {
    animation-name: pre_flow3-1-1;
    /* animation-duration: 2s; */
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
}

@keyframes pre_flow3-1-2 {
    0% {
        opacity: .1;
    }

    100% {
        opacity: 1;
    }
}

.pre3-1 img {
    animation-name: pre_flow3-1-2;
    /* animation-duration: 2s; */
    animation-duration: 1.5s;
    animation-timing-function: linear;
}

@keyframes pre_flow3-2-2 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.pre3-2 img {
    animation-name: pre_flow3-2-2;
    /* animation-duration: 2s; */
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
}

@keyframes pre_flow3-3-2 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.pre3-3 img {
    animation-name: pre_flow3-3-2;
    /* animation-duration: 2s; */
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
}

.curtain {
    background: linear-gradient(to top right, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, 0));
    background-size: 300% 300%;
    background-position: left 0% bottom 0%;
}

@keyframes curtain {
    0% {
        background-position: left 100% bottom 100%;
    }

    100% {
        background-position: left 0% bottom 0%;
    }
}

.curtain {
    animation-name: curtain;
    animation-duration: 2s;
    animation-timing-function: linear;
}

@keyframes pre_flow4-1-1 {
    0% {
        max-width: 28%;
    }

    100% {
        max-width: 30%;
    }
}

.pre_pc .pre4-1 {
    animation-name: pre_flow4-1-1;
    animation-duration: 2s;
    animation-timing-function: ease-out;
}

@keyframes pre_flow4-1-2 {
    0% {
        opacity: .7;
        filter: blur(2px);

    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}

.pre_pc .pre4-1 img {
    animation-name: pre_flow4-1-2;
    animation-duration: 2s;
    animation-timing-function: linear;
}

@keyframes pre_flow4-1-1_sp {
    0% {
        max-width: 56%;
    }

    100% {
        max-width: 60%;
    }
}

.pre_sp .pre4-1 {
    animation-name: pre_flow4-1-1_sp;
    animation-duration: 2s;
    animation-timing-function: ease-out;
}

.pre_sp .pre4-1 img {
    animation-name: pre_flow4-1-2;
    animation-duration: 2s;
    animation-timing-function: linear;
}

#skip {
    width: 200px;
    height: 50px;
    z-index: 9999;
    margin: 50px auto auto 95%;
    opacity: .3 !important;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#skip:hover {
    opacity: .6 !important;
}

@media screen and (max-width:700px) {
    #skip {
        margin: 50px auto auto 90%;
    }
}